<template>
	<view>
		<view class="tabCon hasFlex">
			<view class="tabItem"
				:class="[tabIndex == index ? 'active' : '']"
				v-for="(item,index) in tabArr"
				:key="index"
				@tap="switchRank(index,item.id)"
			>
				<view class="tabIcon">
					<text class="iconfont" :class="item.icon"></text>
				</view>
				<view class="tabTit">{{item.name}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			tabIndex:Number
		},
		data(){
			//'科举','军衔','魔界','暖暖'
			return{
				tabArr:[
					{name:'科举',icon:'icon-jiaoyu',id:1},
					{name:'军衔',icon:'icon-junren',id:2},
					{name:'魔界',icon:'icon-mojie',id:3},
					{name:'暖暖',icon:'icon-tianshi',id:4}
				]
			}
		},
		methods:{
			switchRank(index,id){
				this.$emit('switchRank',index,id);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.tabItem{
		width: 25%;
		text-align: center;
		.tabIcon{
			@include respTo(phone){
				width: 140rpx;
				height: 140rpx;
				line-height: 140rpx;
			}
			@include respTo(pad){
				width: 120rpx;
				height: 120rpx;
				line-height: 120rpx;
			}
			background: #d6d6d6;
			border-radius: 50%;
			margin: 0 auto 10rpx;
			text-align: center;
			.iconfont{
				color: #fff;
				@include respTo(phone){
					font-size: 70rpx;
				}
				@include respTo(pad){
					font-size: 50rpx;
				}
				&.icon-junren{
					font-size: 110rpx;
				}
				&.icon-tianshi{
					font-size: 120rpx;
				}
			}
		}
		.tabTit{
			color: #d6d6d6;
			@include respTo(phone){
				font-size: $font-size34;
			}
			@include respTo(pad){
				font-size: $padSize20;
			}
		}
		&.active{
			.tabIcon{
				background:$pss-color-primary_2 ;
				color: #fff;
			}
			.tabTit{
				color: $pss-color-primary_2;
			}
		}
	}
</style>